<template>
  <view class='container'>
    <scroll-view :scroll-y="true" :style="[scrollViewStyle]" @scrolltolower="loadMore()">
      
        <view style="width: 750rpx;display: flex;position: relative;">
          <image :src="images.banner" class="banner" mode="widthFix"/>
          <view  class="status-box"> <!-- open-type="subscribe" -->
            <button  class="status-button " v-if="status=='on'" @click="off">下班</button>
            <button class="status-button" v-else @click="on" open-type="subscribe">上班</button>
            <!-- <image :src="images.off"  v-if="status=='on'" @click="off()"/>
            <image :src="images.on"  v-else @click="on()"/> -->
          </view>
        </view>
        <view class="xztv-row xztv-col-center">
          <view class="search xztv-row xztv-col-center mt-20">
            <view @click="search" class="search-icon">
              <uni-icons type="search" size="16" color="rgba(0, 0, 0, 0.31)"></uni-icons>
            </view>
            <input placeholder="请输入关键字搜索" class="search-input" v-model="keyword" @confirm="search" />
            <view class='query-box xztv-flex-center' @click="search">
              <text>查询</text>
            </view>
          </view>
         
        </view>
        
        <view class="item"  @click="itemInfo(item)" v-for="(item,index) in dataList" :key="index">
          <view class="title">{{item.create_time}}</view>
          <view style="height: 10rpx;"></view>
        	<view class="xztv-row item-row">
        	  <view class="left">姓名</view>
        	  <view class="right">
        	   {{item.name}}
        	  </view>
        	</view>
        	<view class="xztv-row item-row">
        	  <view class="left">手机号</view>
        	  <view class="right">
        	   {{item.mobile}}
        	  </view>
        	</view>
          <view class="xztv-row item-row">
            <view class="left">门禁名称</view>
            <view class="right">
              {{item.device_name}}
            </view>
          </view>
          <view class="xztv-row item-row">
            <view class="left">小区名称</view>
            <view class="right">
              {{item.community_name}}
            </view>
          </view>
        	<view class="status-btn xztv-flex-center status-refuse"  v-if="item.status=='1'">未审核</view>
        </view>
        
        <view v-if="dataList.length == 0" class="xztv-flex-center mt-40">
          暂无数据
        </view>

    </scroll-view>
    <!-- <view @click="add()" class="manage-btn xztv-flex-center">
    	添加
    </view> -->
  </view>
</template>

<script>
import {getStrangerList,staffOff,staffOn} from '@/api/staff.js'
export default {
  data() {
    return {
      tenantId: "",
      page: 1,
      phoneSys: {},
      dataList: [],
      hasMore: true,
      keyword: "",
      images:{
        banner:"https://www.alizaozao.com/static/banner.jpg",
        on:"https://www.alizaozao.com/static/on.png",
        off:"https://www.alizaozao.com/static/off.png"
      },
      staff:{},
      status:"on"
    }
  },
  async mounted() {
    const sys = uni.getSystemInfoSync();
    this.phoneSys = {
      windowWidth: sys.windowWidth,
      windowHeight: sys.windowHeight,
      // #ifndef MP-ALIPAY
      safeBottom: sys.safeAreaInsets.bottom,
      // #endif
      // #ifdef MP-ALIPAY
      safeBottom: 0,
      // #endif
    };
    
  },
  computed: {
    scrollViewStyle() {
      let style = {};
      style.width = this.phoneSys.windowWidth + 'px';
      style.height = this.phoneSys.windowHeight + 'px';
      style.paddingBottom = '60px';
      return style;
    },
  },
  onLoad(options) {
    

  },
  onShow() {
    this.getList()
  },


  methods: {
    off(){
      // uni.requestSubscribeMessage({
      //   tmplIds: ['6s2cLvGshWcEUmneVHT1MmEHLfoxyTBjn_q3XOk9REY'],
      //   success: (res) => {
      //     uni.setStorageSync('acceptStoreSubscribeMessage', res);
      //     console.log('订阅成功', res);
      //   },
      //   fail: (err) => {
      //     console.log('订阅失败', err);
      //   },
      // });
      staffOff().then((res)=>{
        if(res.data.code==0){
          this.status="off"
          uni.showModal({
          	title: '提示',
          	content: res.data.data,
            showCancel:false,
          	success: function (res) {
          		if (res.confirm) {
          			
          		} else if (res.cancel) {
          			console.log('用户点击取消');
          		}
          	}
          });
        }else{
          uni.showModal({
            title:"提示",
            content: res.data.msg,
            showCancel:false
          })
        }
      })
    },
    on(){
      let that=this;
      uni.requestSubscribeMessage({
       
       tmplIds: ['6s2cLvGshWcEUmneVHT1MmEHLfoxyTBjn_q3XOk9REY'],
       success: (resu) => {
         console.log("resu",resu);
         uni.setStorageSync('acceptStoreSubscribeMessage', resu);
         staffOn().then((res)=>{
           if(res.data.code==0){
             that.status="on"
             uni.showModal({
             	title: '提示',
             	content: res.data.data,
               showCancel:false,
             	success: function (res) {
             		if (res.confirm) {
             			
             		} else if (res.cancel) {
             			console.log('用户点击取消');
             		}
             	}
             });
           }else{
             uni.showModal({
               title:"提示",
               content: res.data.msg,
               showCancel:false
             })
           }
         })
       },
       fail: (err) => {
         console.log('订阅失败', err);
       },
     });
      
    },
    add(){
      this.$to(``);
    },
    
    
    itemInfo(item) {
      uni.navigateTo({
      	url:`/pages/admin/stranger/info?id=` + item.id
      })
      //this.$to();
    },
    search() {
      this.getList();
    },
    getList() {
      this.page = 1;
      this.hasMore = true;
      getStrangerList({keyword:this.keyword}).then((res)=>{
        if(res.data.code==0){
          console.log(res);
          this.dataList=res.data.data.data
          this.status=res.data.data.staff.status
        }
      })
    },
    loadMore() {
      if (!this.hasMore) {
        return;
      }
      this.page += 1
      
    },
  }
}
</script>

<style lang="less" scoped>
.banner{
  width: 690rpx;
  margin:16rpx auto;
  border-radius: 16rpx
}
.status-box{
  position: absolute;
  height:60rpx;
  width: 180rpx;
  bottom:80rpx;
  left:140rpx;
  .status-button{
    width:100%;
    height: 100%;
    background-color:#0072b5 ;
    border:2px solid white;
    font-size: 32rpx;
    color:white;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  image{
    width:100%;
    height: 100%;
  }
}
.manage-btn{
  position: absolute;
  bottom:200rpx;
  right:40rpx;
  width: 100rpx;
  height: 100rpx;
  background:#4AB5FF;
  border-radius: 50%;
  color:white;
}
.title-box {
  padding: 20rpx 50rpx;
  display: flex;

  .item-title {
    margin-left: 30rpx;
    margin-right: 40rpx;
    flex:1;
    >h4 {
      font-size: 32rpx;
    }

    >view {
      color: #999;
      font-size: 24rpx;
    }
  }
}
.position_icon {
  width: 66rpx;
  height: 66rpx;
  margin-left: 21rpx;
  margin-top: 10rpx;
}

.search {
  width: 680rpx;
  height: 82rpx;
  background: #FFFFFF;
  border-radius: 41rpx;
  margin-left: 24rpx;

  .search-icon {
    width: 32rpx;
    height: 32rpx;
    margin-left: 60rpx
  }

  .search-input {
    margin-left: 8rpx;
    flex: 1;
    width: 480rpx;
  }

  .query-box {
    width: 135rpx;
    height: 64rpx;
    background: #4AB5FF;
    border-radius: 41rpx 41rpx 41rpx 41rpx;
    margin-right: 21rpx;
    color: white
  }
}

.container {
  position: relative;
  background: #F6F7F7;
  background-size: 100% 366rpx;
  background-repeat: no-repeat;

  .item {
    position: relative;
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin: 20rpx auto;
    padding: 40rpx 38rpx;
    box-sizing: border-box;

    .status-btn {
      width: 135rpx;
      height: 55rpx;
      border-radius: 0rpx 20rpx 0rpx 20rpx;
      position: absolute;
      right: 0;
      top: 0;
    }

			
    .status-wait {
      background: rgba(228, 139, 4, 0.14);
      color: rgba(228, 139, 4, 1);
    }

    .status-pass {
      background: rgba(19, 159, 0, 0.14);
      color: rgba(19, 159, 0, 1);
    }

    .status-refuse{
      background:rgba(0, 0, 0, 0.09);
      color:red;
    }

    .title {
      font-weight: 600;
      font-size: 40rpx;
      color: #000000;
      line-height: 42rpx;
      margin-bottom: 10rpx;
    }

    .item-row {
      margin-top: 14rpx;

      .left {
        width: 170rpx;
        font-weight: 500;
        font-size: 40rpx;
        color: rgba(0, 0, 0, 0.4);
      }

      .right {
        flex: 1;
        font-weight: 500;
        font-size: 40rpx;
        color: #000000;
        line-height: 40rpx;
      }

      .distance {
        color: rgba(0, 0, 0, 0.4);
      }

      .map_icon {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
}
</style>
